<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!-- 
        required必须的，

     -->
    <div id="app">
        <child contont="lkds12"></child>
    </div>
    <script type="text/javascript">
    Vue.component("child", {
        // props: ["contont"],
        props: {
            contont: {
                type: [Number, String], //规定类型
                required: true, //必需的
                default: "defaultProps", //默认值
                validator: function(val) {
                    return val.length > 5
                }, //自定义校验器
            }
        },
        data: function() {
            return {
                con: this.contont
            }
        },
        template: "<div>{{con}}</div>"
    })

    var vm = new Vue({
        el: "#app",
        data: {


        }
    });
    </script>
</body>
</html